<!--
 * @Description: 支付页面
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-17 15:25:15
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-23 09:34:30
-->
<template>
    <div class="containers">
        <div class="payment">
            <bar
                class="item"
                :title="`订单号:${orderNo}`"
                titleSize="max"
                :icon="true"
            >
                <div class="payment-top">
                    <div class="left">
                        <div class="name">
                            {{title(orderInfo.type)}}：{{orderInfo.title}}
                        </div>
                    </div>
                    <div class="right">
                        <span class="e">支付金额：</span>
                        <span class="price">￥{{orderInfo.totalFee}}</span>
                    </div>
                </div>
            </bar>

            <div class="payment-bottom">
                <el-tabs>
                    <el-tab-pane>
                        <div slot="label" class="paly-title">
                            <i class="iconfont iconweixin" style="color:#50b674"></i>
                            <span>微信支付</span>
                        </div>
                        <div class="erm-wrap">
                            <div class="s">微信支付</div>
                            <div class="n">打开微信扫一扫，扫描下方二维码完成支付</div>
                            <div class="img-box">
                                <img :src="weixinEwm" alt="">
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane>
                        <div slot="label" class="paly-title">
                            <i class="iconfont iconzhifubao" style="color:#05b4fd"></i>
                            <span>支付宝支付</span>
                        </div>
                        暂未开放
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <sign-success :visible.sync="is_success"></sign-success>
    </div>
</template>
<script>
import {getOrderInfo,getEwm,getPayStatus} from '~/api'
export default {
    async asyncData({params,app}){
        const orderNo = params.id;
        return{
            orderNo
        }
    },
    data() {
        return {
            orderNo:'',
            orderInfo:'',
            //微信二维码
            weixinEwm:'',
            // 获取订单状态
            setInterval:'',
            // 是否登录成功
            is_success:false
        }
    },
    
    beforeMount(){
        // 获取订单详情
        getOrderInfo(this.orderNo).then(res=>{
            if(res.data.code === 0){
                this.orderInfo = res.data.data
            }else{
                this.$router.push('/404')
            }
        })
        // 生成支付二维码
        getEwm(this.orderNo).then(res=>{
            if(res.data.code === 0){
                this.weixinEwm = '/images/example/erweima.png'
            }
        })
    },
    mounted(){
        // 创建定时器
        this.setInterval = setInterval(this._getPayStatus, 2000);
    },
    beforeDestroy(){
        // 销毁定时器
        clearInterval(this.setInterval);
    },
    methods:{
        // 查询订单状态
        _getPayStatus(){
            getPayStatus(this.orderNo).then(res=>{
                if(res.data.code ===0){
                    if(res.data.data.status === 2){
                        this.is_success = true;
                        clearInterval(this.setInterval);
                    }
                }
            })
        },
        // 课程名称
        title(type){
            if(type == 1){
                return '课程名称'
            } else if(type == 2){
                return '题库名称'
            }
        }
    }
};
</script>
<style lang="scss">
    .payment-bottom {
        .el-tabs__item {
            height: 60px;
            line-height: 60px;
        }
    }
</style>
<style lang="scss" scoped>
.payment {
    padding: 20px 0 50px;
}
.payment-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 10px;
    .left {
        .name {
            font-size: 16px;
            color: #333;
        }
        .s {
            font-size: 14px;
            color: #f63232;
            margin-top: 10px;
        }
    }
    .right {
        .e {
            font-size: 16px;
            color: #333;
        }
        .price {
            font-size: 38px;
            color: #f63232;
        }
    }
}
.payment-bottom {
    background-color: #fff;
    padding: 10px 30px 30px 30px;
    margin-top: 30px;
    .erm-wrap{
        width: 300px;
        margin: 20px auto;
        .s{
            font-size: 26px;
            color: #333333;
        }
        .n{
            font-size: 15px;
            color: #999;
            margin-top: 15px;
        }
        .img-box{
            padding: 30px;
            border: 1px solid #aaaaaa;
            margin-top: 10px;
            img{
                width: 100%;
            }
        }
    }
}
.paly-title{
    i{
        font-size: 40px;
        vertical-align: middle;
    }
    span{
        font-size: 20px;
        vertical-align: middle;
    }
}
</style>